<template>
  <div class="container">
    <div class="search-box">
      <el-row :gutter="20">
        <el-form :model="queryParams" ref="queryForm" label-width="100px">
          <el-col :span="5">
            <el-form-item label="合同编号" prop="contractNumber" class="item">
              <el-input
                type="text"
                clearable
                size="mini"
                v-model="queryParams.contractNumber"
                placeholder="请输入合同编号"
                @clear="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="订单类型" prop="dictLabel" class="item">
              <el-select v-model="queryParams.type" filterable clearable size="mini">
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="业务员" prop="contractNumber" class="item" filterable >
              <el-select
                v-model="queryParams.userId"
                size="mini"
                clearable
                filterable
                @clear="handleQuery"
              >
                <el-option
                  v-for="item in peopleLists"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单金额(元)" prop="totalMoney" class="item">
              <el-input
                clearable
                v-model="queryParams.startMoney"
                size="mini"
                style="display:inline-block;width:120px"
              >
              </el-input>
              至
              <el-input
                clearable
                v-model="queryParams.endMonry"
                size="mini"
                style="display:inline-block;width:120px;"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="下单时间" prop="orderTime" class="item">
              <el-date-picker
                v-model="orderTime"
                type="daterange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item style="margin-bottom: 0px;">
              <el-button
                type="cyan"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <!-- <el-button
                icon="el-icon-folder-opened"
                type="primary"
                size="mini"
                @click="openSearch"
                >展开</el-button
              > -->
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
          <!-- <div class="item1" v-if="!openFlag">
          <el-button
            type="cyan"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" 
            >重置</el-button
          >
          <el-button
            @click="openSearch"
            icon="el-icon-folder-opened"
            type="primary"
            size="mini"
            >收起</el-button
          >
        </div> -->
        </el-form>
      </el-row>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:order:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:order:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-s-promotion"
          size="mini"
          @click="handleExport"
          >订单导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-check" size="mini" @click="getOpen">回款提醒列表</el-button>
      </el-col>


      <!-- 用于刷新和隐藏搜索框 -->
      <!-- <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar> -->
    </el-row>

    <el-table
      v-loading="loading"
      ref="multipleTable99"
      :data="dataList"
      :max-height="tableHeight"
      style="width: 100%;"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
      border
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="合同编号"
        align="center"
        width="220"
        prop="contractNumber"
      >
        <template slot-scope="scope">
          <span
            class="blue"
            style="text-decoration: underline; margin-left: 5px;color: #409eff; cursor: pointer;"
            @click="handleUpdate1(scope.row)"
            >{{ scope.row.contractNumber }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="公司名"
        align="center"
        width="220"
        prop="companyName"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column label="订单类型" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ typeLevel(scope.row.type) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="订单内容"
        align="center"
        min-width="150"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.typeValues.join(",") }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="类型值" align="center" prop="typeValue" /> -->
      <el-table-column label="容量/MW" align="center" prop="capacity" />
      <el-table-column label="订单金额(元)" align="center" prop="orderPrice" />
      <!-- <el-table-column label="支付金额" align="center" prop="payMoney" /> -->
      <el-table-column
        label="业务员"
        align="center"
        prop="userName"
      ></el-table-column>
      <el-table-column label="下单时间" :sortable="'custom'" align="center" prop="orderTime" />
      <el-table-column
        label="备注"
        align="center"
        prop="remark"
        width="200"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="更新时间" align="center" prop="updateTime" /> -->
      <el-table-column
        label="操作"
        align="center"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAdd1(scope.row)"
            v-hasPermi="['system:order:add']"
            >再来一单
          </el-button>
          <!-- <el-button size="mini" @click="addPayment(scope.row)" icon="el-icon-document-add" type="text">
            添加付款记录
          </el-button> -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:order:edit']"
            >修改</el-button
          >
          <el-button type="text" @click="getmoneyList(scope.row)" size="mini">回款记录</el-button>
          <el-button 
           size="mini"
           @click="getMoney(scope.row)"
           type="text">
            回款
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:order:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="total">
      
    </div> -->
    <div class="total">
      <div>
        <span v-if="statisticsType == 1">总计：订单金额：<span class="top">{{num(sumNum)}}￥</span></span> 
      <span v-if="statisticsType == 2">总计：容量：<span class="top">{{num(sumNum)}}MW</span></span>
      </div>
      <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    >
    </pagination>
    </div>
    
    

    <!-- 添加或修改对话框 -->
    <el-dialog :close-on-click-modal ="false" :title="title" :visible.sync="open" append-to-body width="850px">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="客户选择">
              <el-button
                type="primary"
                icon="el-icon-user"
                size="mini"
                :disabled="show69"
                @click="chooseCustomer"
                >选择客户</el-button
              >
              <span
                style="margin-left: 8px; font-weight: 550"
                v-if="multipleSelection1.length == 1"
                >客户姓名:{{ multipleSelection1[0].customerName }}</span
              >
              <span
                style="margin-left: 8px; font-weight: 550"
                v-if="title == '修改'"
                >客户姓名:{{ form.customerName }}</span
              >
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="show68">
            <el-form-item label="新/老客户" prop="customerType">
              <el-select v-model="form.customerType" :disabled="isEdit">
                <el-option
                  v-for="item in levelList2"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单类型" prop="type">
              <el-select
                v-model="form.type"
                clearable
                @change="typeChange"
                :disabled="isEdit"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单内容" prop="typeValues">
              <el-select
                v-model="form.typeValues"
                clearable
                multiple
                @change="typeValueChange"
                filterable
                :disabled="isEdit"
              >
                <el-option
                  v-for="item in typeValuelist"
                  :key="item.id"
                  :label="item.typeValue"
                  :value="item.typeValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="报价"  prop="quotePrice">
              <el-input-number controls-position="right" :min="0" v-model="form.quotePrice"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成本价" prop="costPrice">
              <el-input-number controls-position="right" :min="0" v-model="form.costPrice"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="质保金" prop="warrantyPrice">
              <el-input-number controls-position="right" :min="0" v-model="form.warrantyPrice"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单金额" prop="orderPrice">
              <el-input-number controls-position="right" :min="0" v-model="form.orderPrice"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="回款起始时间">
              <el-date-picker
                v-model="form.paymentStartTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回款结束时间">
              <el-date-picker
                v-model="form.paymentEndTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="下单时间" prop="orderTime">
              <el-date-picker
                v-model="form.orderTime"
                type="date"
                clearable
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间"
                :disabled="isEdit"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="容量" prop="capacity">
              <el-input
                clearable
                type="number"
                v-model="form.capacity"
                placeholder="请输入容量值(MW)"
                :disabled="isEdit"
              >
                <template slot="append">MW</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractNumber">
              <!-- <el-input
                type="text"
                clearable
                v-model="form.contractNumber"
                placeholder="请输入合同编号"
                :disabled="isEdit"
              /> -->
              <el-select
                v-model="form.contractNumber"
                placeholder="请选择合同编号"
                style="width: 258px"
                :disabled="isEdit"
                filterable
                allow-create
              >
                <el-option
                  v-for="item in contractList"
                  :key="item.contractNo"
                  :label="item.contractNo"
                  :value="item.contractNo"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户合同编号" prop="customerContractNumber">
              <el-input
                type="text"
                clearable
                v-model="form.customerContractNumber"
                placeholder="请输入客户合同编号"
                :disabled="isEdit"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="支付币种" prop="currency">
              <el-select
                v-model="form.currency"
                clearable
                @change="moneyChange"
                :disabled="isEdit"
              >
                <el-option
                  v-for="item in moneyList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单金额(当前币种)" prop="payMoney">
              <el-input
                type="text"
                clearable
                v-model="form.payMoney"
                placeholder="当前币种订单金额"
                @focus="money_focus"
                :disabled="isEdit"
              >
                <el-button
                  slot="append"
                  icon="el-icon-sort"
                  @click.stop="jisuan"
                ></el-button>
              </el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="12" v-if="roleOptions">
            <el-form-item label="订单金额" prop="totalMoney">
              <el-input type="number" v-model="form.totalMoney" />
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row v-if="title == '修改'">
          <el-col :span="12">
            <el-form-item label="订单创建时间:">
              {{ form.createTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单更新时间:">
              {{ form.updateTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                clearable
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
                :disabled="isEdit"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <el-col :span="24"> -->
      <div slot="footer" class="dialog-footer" v-if="title != '查看订单'">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
      <!-- </el-col> -->
    </el-dialog>


    <!-- 选择客户 -->
    <el-dialog
      title="选择客户"
      :visible.sync="applyVisible"
      width="1300px"
      label-width="160px"
    >
      <el-form ref="ruleForm" label-width="70px">
        <el-col :span="24">
          <el-form-item label="搜索客户">
            <el-select
              v-model="input555"
              placeholder="请选择客户等级"
              size="small"
              clearable
              @change="search6"
            >
              <el-option
                v-for="item in levelList"
                :key="item.gradeValue"
                :label="item.gradeName"
                :value="item.gradeValue"
              ></el-option>
            </el-select>
            <!-- <el-autocomplete
              class="inline-input"
              v-model="input444"
              :fetch-suggestions="querySearch"
              placeholder="请输入标签名称"
              value-key="context"
              clearable
              @clear="search6"
            ></el-autocomplete> -->
            <el-select v-model="input444" clearable placeholder="请选择标签" @change="search6">
              <el-option
                v-for="item in labels"
                :key="item.id"
                :label="item.context"
                :value="item.context"
              ></el-option>
            </el-select>
            <el-input
              style="width: 220px"
              placeholder="请输入公司名称"
              v-model="input333"
              clearable
              class="input-with-select"
              @clear="search6"
            >
            </el-input>
            <el-input
              style="width: 220px"
              placeholder="请输入客户名称"
              v-model="input111"
              clearable
              class="input-with-select"
              @clear="search6"
            >
            </el-input>
            <el-input
              style="width: 220px"
              placeholder="请输入邮箱"
              v-model="input222"
              clearable
              class="input-with-select"
              @clear="search6"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="search6"
              ></el-button>
            </el-input>
          </el-form-item>
        </el-col>

        <el-table
          v-loading="loading"
          :data="tableData1"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @select-all="onSelectAll"
          @selection-change="handleSelectionChange1"
        >
          <el-table-column
            type="selection"
            width="50"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="customerName"
            label="客户姓名"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column label="公司名称" min-width="260" align="center">
            <template slot-scope="scope">
              <span
                class="blue"
                style="text-decoration: underline; margin-left: 5px"
                @click="handleEdit(scope.$index, scope.row)"
                >{{ scope.row.companyName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="客户等级" min-width="100" align="center">
            <template slot-scope="scope">
              <span>{{ formatLevel(scope.row.grade) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户标签" min-width="100" align="center">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.label }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="客户来源" min-width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.source }}</span>
            </template>
          </el-table-column>
          <el-table-column label="新/老客户" min-width="100" align="center">
            <template slot-scope="scope">
              <span>{{ formatType(scope.row.customerType) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户角色" min-width="100" align="center">
            <template slot-scope="scope">
              <span>{{ formatRole(scope.row.customerRole) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="customerPhone"
            label="联系电话"
            align="center"
            min-width="130"
          ></el-table-column>
          <el-table-column label="录入时间" align="center" min-width="160">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <pagination
            v-show="pageTotal1 > 0"
            :total="pageTotal1"
            :page.sync="params.pageNum"
            :limit.sync="params.pageSize"
            @pagination="getData00"
          />
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="appleSubmitForm()" type="primary" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :visible.sync="payVis" width="1300px" title="添加付款记录">
      <el-form ref="payForm" label-width="230px" :model="payForm">
            <!-- <el-form-item label="订单金额(美元):">
              <el-input
                @change="monChange"
                style="width:300px"
                type="text"
                clearable
                v-model="payForm.payMoney"
                placeholder="订单金额(默认美元)"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="支付币种:" prop="currency">
              <el-select
                @change="monChange"
                style="width:300px"
                v-model="payForm.currency"
                clearable
              >
                <el-option
                  v-for="item in moneyList1"
                  :key="item.dictLabel"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="订单金额">
              <el-input  v-model="payForm.conversionAmount"></el-input>
            </el-form-item>
            <el-form-item label="备注:">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="payForm.remark"
                maxlength="30"
                show-word-limit
              >
              </el-input>
            </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="payVis = false" size="mini">取消</el-button>
        <el-button @click="paySure()" type="primary" size="mini"
          >确定</el-button
        >
      </span>
    </el-dialog>
        <!-- 提醒 -->
    <el-dialog
      title="回款提醒列表"
      :visible.sync="openListVis"
      width="1000px"
    >
    <div  style="text-align:right">
      <!-- <el-button type="primary" @click="remindAll" :disabled="selectDataArrL.length == 0">关闭提醒</el-button> -->
      <!-- <el-button type="dangear" @click="delAll" :disabled="selectDataArrL.length == 0">一键删除</el-button> -->
    </div>
      <el-table
        :data="openList"
        class="table"
        border
        ref="table"
        header-cell-class-name="table-header"
        style="margin-top:10px"
      >
        <el-table-column
          prop="userName"
          align="center"
          label="业务员"
        ></el-table-column>
        <el-table-column
          prop="orderId"
          align="center"
          width="250"
          label="订单编号"
        ></el-table-column>
        <el-table-column
          prop="companyName"
          align="center"
          width="250"
          label="客户公司"
        ></el-table-column>
        <el-table-column label="到期天数" align="center" width="150">
          <template slot-scope="scope">{{ scope.row.content }}</template>
        </el-table-column>
        <el-table-column
          prop="paymentDate"
          align="center"
          label="回款提醒开始时间"
        ></el-table-column>
      </el-table>
      <div class="pagination">
          <pagination
            v-show="totalVis > 0"
            :total="totalVis"
            :page.sync="paramsVis.pageNum"
            :limit.sync="paramsVis.pageSize"
            @pagination="getOpen1"
          />
        </div>
    </el-dialog>
    <el-dialog 
      title="回款"
      :visible.sync="moneyVis"
      width="1000px"
    >
      <el-form label-width="120px" v-model="moneyForm">
        <el-form-item label="回款日期:">
             <el-date-picker
              v-model="moneyForm.paymentDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期:">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="回款金额:">
          <el-input-number v-model="moneyForm.amount"></el-input-number>
        </el-form-item>
        <el-form-item label="内容:">
          <el-input v-model="moneyForm.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="moneyVis = false" size="mini">取消</el-button>
        <el-button @click="moneySure()" type="primary" size="mini"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="回款记录"
      :visible.sync="dataVis"
      width="1000px"
    >
      <el-table
        :data="moneyData"
        class="table"
        border
        ref="table"
        header-cell-class-name="table-header"
        style="margin-top:10px"
      >
        <el-table-column
          prop="userName"
          align="center"
          label="操作人"
        ></el-table-column>
        <el-table-column
          prop="amount"
          align="center"
          width="250"
          label="回款金额"
        ></el-table-column>
        <el-table-column label="回款日期" align="center" width="150">
          <template slot-scope="scope">{{ scope.row.paymentDate }}</template>
        </el-table-column>
        <el-table-column
          prop="content"
          align="center"
          label="备注"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  put,
  del,
  add,
  getData00,
  queryLevel,
  getLabels,
  oderType,
  exportOrderList,
  getList,
  search,
  getOpenList,
  moneySur,
  getmoneyList,
  paySure
} from "@/api/systemSettings/testN";
import { listUser } from "@/api/systemSettings/resource";

import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import {queryByCustomerId} from "@/api/contract";
// import { listType, getType } from "@/api/system/dict/type";

export default {
  data() {
    return {
      contractList:[],
      // 统计订单金额、订单容量
      statisticsType: null,
      sumNum: 0,
      tableHeight: 0,
      roleOptions: false,
      isEdit: false,
      openFlag: true,
      change_money_btn: false,
      change_money: "",
      currency: "",
      show69: true,
      show68: false,
      labels: [],
      payForm:{
        conversionAmount:0,
        payMoney:0,
        currency:''
      },
      typeValuelist: [],
      dataVis:false,
      input111: undefined,
      input222: undefined,
      input333: undefined,
      input444: undefined,
      input555: undefined,
      applyVisible: false,
      moneyForm:{
         orderId:'',
         content:'',
         paymentDate:''
      },
      moneyVis:false,
      orderLstData:[],
      tableData1: [],
      formData: {},
      levelList: [],
      peopleLists: [],
      prop: 'orderTime',
      sort: 'descending', 
      customerRoleList: [],
      multipleSelection1: [],
      pageTotal1: 0,
      levelList2: [
        {
          id: "1",
          title: "新客户"
        },
        {
          id: "2",
          title: "老客户"
        }
      ],
      typeList: [
        {
          id: "1",
          title: "系统"
        },
        {
          id: "2",
          title: "组件"
        }
      ],
      dialogImageUrl: "",
      dialogVisible: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      moneyVis:false,
      payVis:false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      dataList: [],
      // 默认字典类型
      defaultDictType: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      moneyList1:[],
      moneyList: [
        {
          id: "0",
          title: "美元$"
        },
        {
          id: "1",
          title: "人民币￥"
        },
        {
          id: "2",
          title: "欧元€"
        }
      ],
      // 类型数据字典
      typeOptions: [],
      openListVis:false,
      openList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      moneyParams:{
        pageNum:1,
        pageSize:10
      },
      orderTime: [],
      // 表单参数
      form: {},
      params: {
        userId: 1,
        pageNum: 1,
        pageSize: 10
      },
      moneyData:[],
      paramsVis:{
        pageNum: 1,
        pageSize: 10
      },
      totalVis:0,
      // 表单校验
      rules: {
        totalMoney: [
          {
            required: true,
            message: "请点击标识符进行汇率转换",
            trigger: "blur"
          }
        ],
        payMoney: [
          { required: true, message: "当前币种订单金额", trigger: "blur" }
        ],
        contractNumber: [
          { required: true, message: "请输入合同编号", trigger: "blur" }
        ],
        type: [{ required: true, message: "请输入类型", trigger: "blur" }],
        currency: [
          { required: true, message: "请选择支付币种", trigger: "blur" }
        ],
        typeValues: [
          { required: true, message: "请输入类型值", trigger: "blur" }
        ],
        quotePrice:[
          { required: true, message: "请输入报价", trigger: "blur" }
        ],
        costPrice:[
          { required: true, message: "请输入成本价", trigger: "blur" }
        ],
        warrantyPrice:[
          { required: true, message: "请输入质保金", trigger: "blur" }
        ],
        orderPrice:[
          { required: true, message: "请输入订单金额", trigger: "blur" }
        ],
        customerId: [
          { required: true, message: "请选择客户ID", trigger: "blur" }
        ],
        orderTime: [
          { required: true, message: "请选择下单时间", trigger: "blur" }
        ],
        customerType: [
          { required: true, message: "请选择客户类型", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    // const dictId = this.$route.params && this.$route.params.dictId;
    // this.getType(dictId);
    // this.getTypeList();
    // this.getDicts("sys_normal_disable").then(response => {
    //   this.statusOptions = response.data;
    // });
    if (this.$route.query.id) {
      this.queryParams.type = this.$route.query.id;
      this.getList();
    } else {
      this.getList();
    }
    this.peopleList();
    // let role = localStorage.getItem("role");
    this.getDicts('money').then((response) => {
        this.moneyList1 = response.data;
      });
    // 1--国外   2--国内
    // if (role == 1) {
      // this.roleOptions = true;
    // } else {
      // this.roleOptions = false;
    // }
  },
  mounted() {
    this.getLabels();
    this.fetchLevelList();
    this.getDicts("customerRole").then(response => {
      this.customerRoleList = response.data;
    });
    this.$nextTick(function() {
      this.tableHeight =
        window.innerHeight - this.$refs.multipleTable99.$el.offsetTop - 150;
      let self = this;
      window.onresize = function() {
        self.tableHeight =
          window.innerHeight - self.$refs.multipleTable99.$el.offsetTop - 150;
      };
    });
  },
  methods: {
    checkPermi,
    checkRole,
    getOpen() {
      this.paramsVis = {
        pageNum: 1,
        pageSize: 10
      }
      this.getOpen1()
      this.openListVis = true
    },
    getmoneyList(row) {
      getmoneyList(row.id).then(res => {
        if(res.code == 200){
          this.moneyData = res.rows
          this.dataVis = true
        }
      })
    },
    getMoney(row) {
      this.moneyForm = {
        orderId:row.id,
        content:'',
        paymentDate:''
      }
      this.moneyVis = true
    },
    moneySure() {
      moneySur(this.moneyForm).then(res => {
        if(res.code == 200){
          this.$message.success('操作成功')
          this.moneyVis = false
        }
      })
    },
    getOpen1() {
      getOpenList(this.paramsVis).then(res => {
        if(res.code ==200){
          this.openList = res.rows
          this.totalVis = res.total
        }
      })
    },
    // 保留两位小数
    num(val){
      return val.toFixed(2);
    },
    /** 查询用户列表 */
    peopleList() {
      listUser({
        pageNum: 1,
        pageSize: 5000
      }).then(res => {
        this.peopleLists = res.rows;
      });
    },
    // 确定转换
    paySure() {
      paySure(this.payForm).then(res => {
        if(res.code == 200){
          this.payVis = false
          this.getData00()
        }
      })
    },
    // 货币兑换
    monChange() {
      for(let i =0;i<this.moneyList1.length;i++){
        if(this.payForm.currency == this.moneyList1[i].dictLabel){
            this.payForm.conversionAmount = this.payForm.payMoney * this.moneyList1[i].dictValue
        }
      }
    },
    addPayment() {
      this.payForm = {
        conversionAmount:0,
        payMoney:0,
        currency:'美元$',
        remark:''
      }
      this.payVis = true
    },
    handleSortChange({ column, prop, order }){
      let data = JSON.parse(JSON.stringify(this.queryParams));;
      this.prop = {prop}.prop;
      this.sort = {order}.order;
      data["clouname"] = this.prop;
      data["sort"] = this.sort;
      console.log(data)
      list(data).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.sumNum = response.sumNum;
        this.statisticsType = response.statisticsType;
      });
    },
    money_Type(e) {
      var str = this.moneyList.find(function(item) {
        return item.id == e;
      });
      if (str) return str.title;
    },
    openSearch() {
      this.openFlag = !this.openFlag;
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        contractNumber: "",
        type: "",
        startMoney: "",
        endMonry: ""
      };
      this.orderTime = "";
    },
    money_focus() {
      this.change_money_btn = false;
      console.log("此时获取焦点 必须重新计算汇率");
    },
    jisuan() {
      if (this.form.currency && this.form.payMoney && this.form.orderTime) {
        if (this.form.currency == 0) {
          this.form.totalMoney = this.form.payMoney;
          this.change_money_btn = true;
        } else {
          getList({
            currency: this.form.currency,
            strdate: this.form.orderTime.substring(0, 7)
          }).then(res => {
            // console.log(res);
            if (res.rows.length > 0) {
              this.form.totalMoney =
                Math.round(
                  (Number(this.form.payMoney) / Number(res.rows[0].exchange)) *
                    100
                ) / 100;
              this.change_money_btn = true;
              //   console.log(this.form.totalMoney);
              this.$message.success("汇率转换成功");
            } else {
              let str = this.money_Type(this.form.currency);
              // console.log(this.form.currency,'币种信息')
              this.$message.error(
                this.form.orderTime.substring(0, 7) +
                  "未设置" +
                  str +
                  "汇率，请联系管理员！"
              );
            }
          });
        }
      } else {
        this.$message.warning("请选择支付币种并填写支付金额");
      }
    },
    // 支付币种发生改变
    moneyChange() {
      if (this.form.currency && this.form.payMoney) {
        console.log(this.form.currency);
        console.log(this.form.payMoney);
        this.form.totalMoney =
          Math.round(
            (Number(this.form.payMoney) / Number(this.form.currency)) * 100
          ) / 100;
        console.log(this.form.totalMoney);
      }
    },
    handleExport() {
      // const queryParams = this.queryParams;
      this.$confirm("是否确认导出订单列表?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log("123");
          exportOrderList(this.queryParams).then(response => {
            console.log(response);
            this.download(response.msg);
          });
        })
        .catch(function() {});
    },
    typeValueChange(e) {
      console.log(e);
    },
    fetchLevelList() {
      queryLevel().then(res => {
        this.levelList = res.rows;
      });
    },
    formatRole(val) {
      var str = this.customerRoleList.find(function(item) {
        return (item.dictValue = val);
      });
      if (str) return str.dictLabel;
    },
    formatLevel(val) {
      var str = this.levelList.find(function(item) {
        return item.gradeValue == val;
      });
      if (str) return str.gradeName;
    },
    formatType(val) {
      var str = this.levelList2.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    getLabels() {
      getLabels({
        pageNum: 1,
        pageSize: 9999
      }).then(res => {
        if (res.code == 200) {
          this.labels = res.rows;
        }
      });
    },
    orderPageChange() {
      this.getOpen1();
    },
    querySearch(queryString, cb) {
      console.log(queryString, this.labels);
      var restaurants = this.labels;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.context
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    onSelectAll() {
      this.$refs.multipleTable.clearSelection();
      this.$message.error("只能选择一项,请重新选择");
    },
    handleSelectionChange1(val) {
      if (this.multipleSelection1.length == 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(
          this.multipleSelection1.pop()
        );
        this.$message.error("只能选择一项,请重新选择");
      } else {
        this.multipleSelection1 = val.map(item => item);
      }
      console.log(this.multipleSelection1);
    },
    appleSubmitForm() {
      if (this.multipleSelection1.length == 1) {
        this.applyVisible = false;
        this.input111 = "";
        this.input222 = "";
        this.input333 = "";
        this.input444 = "";
        this.input555 = "";
        if (
          this.multipleSelection1[0].customerType == "0" ||
          !this.multipleSelection1[0].customerType
        ) {
          this.show68 = true;
        } else {
          this.show68 = false;
        }
        let param = {
          customerId: this.multipleSelection1[0].id
        }
        queryByCustomerId(param).then(res=>{
          this.contractList = res.data
        })
      } else {
        this.$message.error("请选择客户");
      }
    },
    timeD() {
    },
    search6() {
      this.params.companyName = this.input333;
      this.params.label = this.input444;
      this.params.grade = this.input555;
      this.params.customerName = this.input111;
      this.params.email = this.input222;
      this.$set(this.params, "pageNum", 1);
      this.getData00();
    },
    typeChange(e) {
      console.log(e);
      this.oderTypeList(e);
    },
    oderTypeList(typeName) {
      oderType({
        pageNum: 1,
        pageSize: 9999,
        typeName: typeName
      })
        .then(res => {
          console.log(res, "类型值");
          if (res.code == "200") {
            this.typeValuelist = res.rows;
            if (this.title == "修改") {
              this.open = true;
              this.contractList=[];
            }
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    //获取客户数据
    getData00() {
      let data = this.params
      console.log(data)
      getData00(data)
        .then(res => {
          console.log(res, "客户管理列表");
          if (res.code == "200") {
            this.tableData1 = res.rows;
            this.pageTotal1 = res.total;
            this.loading = false;
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    chooseCustomer() {
      this.applyVisible = true;
      this.multipleSelection1 = [];
      this.getData00();
    },
    formatSource(val) {
      var str = this.levelList2.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    typeLevel(val) {
      var str = this.typeList.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /** 查询字典类型列表 */
    getTypeList() {
      listType().then(response => {
        this.typeOptions = response.rows;
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      let data = JSON. parse(JSON.stringify(this.queryParams))
      data["clouname"] = this.prop
      data["sort"] = this.sort
      console.log(data)
      list(data).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.sumNum = response.sumNum;
        this.statisticsType = response.statisticsType;
      });
    },
    // 数据状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.contractList=[];
      this.form.payMoney = "";
      this.reset();
      this.getList();
    },
    // 表单重置
    reset() {
      this.form = {
        totalMoney: ""
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if (this.orderTime) {
        this.queryParams.beginTime = this.orderTime[0];
        this.queryParams.endTime = this.orderTime[1];
      }else{
        this.queryParams.beginTime = '';
        this.queryParams.endTime = '';
      }
      // console.log(this.orderTime, "kankan");
      // console.log(this.queryParams, "查询条件");
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      (this.queryParams = {
        pageNum: 1,
        pageSize: 10
      }),
        (this.orderTime = []);
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.isEdit = false;
      this.title = "添加";
      this.show69 = false;
      this.show68 = false;
      this.multipleSelection1 = [];
      this.open = true;
      this.contractList=[];
      this.change_money_btn = false;
      // 国外true   国内false
      if (!this.roleOptions) {
        this.form.currency = "1";
        console.log("看看看是");
      }
    },
    handleAdd1(row) {
      this.isEdit = false;
      this.reset();
      this.title = "添加";
      this.show69 = false;
      this.show68 = false;
      this.multipleSelection1 = [];
      this.open = true;
      this.contractList=[];
      this.change_money_btn = false;
      // this.form.type = row.type;
      // this.form.typeValues = row.typeValues;
      // this.form.orderTime = row.orderTime;
      // this.form.capacity = row.capacity;
      // this.form.currency = row.currency;
      // this.form.payMoney = row.payMoney;
      // this.form.totalMoney = row.totalMoney;
      // this.form.remark = row.remark;
      this.form = JSON.parse(JSON.stringify(row));
      this.form.id = "";
      // 国外true   国内false
      if (!this.roleOptions) {
        this.form.currency = "1";
      }
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.oderTypeList(row.type);
      this.form = {
        totalMoney: ""
      };
      search(row.id).then(res => {
        // console.log(res.data,'订单数据')
        if (res.code == 200) {
          this.form = res.data;
          this.title = "修改";
          this.show69 = true;
          this.show68 = false;
          this.change_money_btn = true;
          this.open = true;
          this.contractList=[];
          this.isEdit = false;
        }
      });
    },
    handleUpdate1(row) {
      this.isEdit = true;
      this.oderTypeList(row.type);
      this.form = {
        totalMoney: ""
      };
      search(row.id).then(res => {
        // console.log(res.data,'订单数据')
        if (res.code == 200) {
          this.form = res.data;
          this.title = "查看订单";
          this.show69 = true;
          this.show68 = false;
          this.change_money_btn = true;
          this.open = true;
          this.contractList=[];
        }
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // console.log(this.form, "提交信息-------------------");
          if (this.form.currency == 0) {
            this.form.totalMoney = this.form.payMoney;
            this.change_money_btn = true;
          }
          if (!this.roleOptions) {
            this.change_money_btn = true;
            this.form.totalMoney = this.form.payMoney;
          }
          // console.log(this.form.id,'2222222222222222222222222')
          if (this.form.id) {
            // if (this.change_money_btn) {
              put(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.contractList=[];
                  this.getList();
                }
              });
            // } else {
              // this.$message.warning("请点击汇率转换");
            // }
          } else {
            if (this.multipleSelection1.length == 1) {
              this.form.customerId = this.multipleSelection1[0].id;
              // if (this.change_money_btn) {
                add(this.form).then(response => {
                  if (response.code === 200) {
                    this.msgSuccess("新增成功");
                    this.open = false;
                    this.contractList=[];
                    this.getList();
                  }
                });
              // } else {
                // this.$message.warning("请点击汇率转换");
              // }
            } else {
              this.$message.error("请选择客户");
            }
          }
        }
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id || this.ids;
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return del(id);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    }
  }
};
</script>
<style scoped>
.container {
  padding: 0 20px !important;
}
.search-box {
  margin-bottom: 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.search-box .item {
  display: inline-block;
  margin-bottom: 0px;
}
.search-box .item1 {
  display: inline-block;
  margin-bottom: 0px;
  margin-left: 20px;
}
.total {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top {
  font-weight: 700;
}
</style>
